<template>
    <view class="content columnbox wdh-100">
        <view class="info-box columnbox wdh-100">
            <view class="info-title wdh-100">投诉洗车间</view>
            <view class="rowbox wdh-100 spb q-box">
				<view class="dissd display border all_item">
					<image style="width: 40rpx;height: 40rpx;" :src="img1" mode=""></image>
					<span class="fontSize font_comm ttx111" style="margin-left: 10rpx;color: #000;">{{info.stationName}}</span>
				</view>
                <!-- <view>扫一扫洗车间墙上的投诉二维码绑定洗车站</view> -->
                <!-- <u-icon name="scan" size="50rpx" color="#17698F"></u-icon> -->
            </view>
            <view class="info-title wdh-100">投诉类型</view>
            <view class="type-list wdh-100">
                <view @click="complaintType=item.value" v-for="(item,index) in complaintTypeList" :key='index'
                    class="rowbox one-type" :class="{'sel-type':item.value==complaintType}">{{item.title}}
                </view>
            </view>
            <view class="info-title wdh-100">投诉内容</view>
            <view class="columnbox wdh-100 content-box">
                <textarea v-model="content" class="input-box" placeholder="请填写15字以上描述，以便我们更好地为您提供帮助~"></textarea>
                <view class="img-list wdh-100">
                    <view class="one-img rowbox" v-for="(item,index) in imglist" :key='index'>
                        <image mode="aspectFill" :src="item"></image>
                    </view>
                    <view @click="addImg" class="img-box rowbox">+</view>
                </view>
            </view>
            <view class="info-title wdh-100">联系方式</view>
            <view class="type-list wdh-100">
                <input v-model="phone" class="input-box" placeholder="请留下您的邮箱或者电话，方便我们联系您哦~" />
            </view>
            <view class="wdh-100 send-btn rowbox" @click="submitInfo">提交投诉</view>
            <view class="r-btn wdh-100" @click="showRecord">投诉记录</view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                complaintTypeList: [{
                        title: '设备损坏',
                        value: 0
                    },
                    {
                        title: '乱摆乱放',
                        value: 1
                    },
                    {
                        title: '清洁剂遗失',
                        value: 2
                    },
                    {
                        title: '其他',
                        value: 3
                    }
                ],
                complaintType: 0,
                content: '',
                imglist: [],
                phone: '',
                submitflag: false,
				info:{},
				img1:this.$imgUrls + '2024/11/12/4ced28e3faf94ca9b1fc3b6ed6d84786.png'
            };
        },
		onLoad(options) {
			// console.log(options)
			this.info = JSON.parse(options.json);
			console.log(this.info)
		},
        methods: {
            showRecord() {
                uni.navigateTo({
                    url: './record'
                })
            },
            async submitInfo() {
                if (this.content == '') {
                    uni.showToast({
                        title: '请输入投诉内容',
                        icon: 'none'
                    })
                    return false
                } else if (this.phone == '') {
                    uni.showToast({
                        title: '请输入联系方式',
                        icon: 'none'
                    })
                    return false
                }
                if (!this.submitflag) {
                    this.submitflag = true
                    uni.showLoading({
                        title: '正在提交'
                    })
                    let list = []
                    for (var i = 0; i < this.imglist.length; i++) {
                        list.push(await this.sendImg(this.imglist[i], i))
                    }

                    let data = {
                        // stationId: '1802712498493509634',
                        // stationName: "测试洗车站",
                        // doorId: '1802714902001668097',
                        // doorName: "1",
                        complaintType: this.complaintType,
                        complaintContent: this.content,
                        phone: this.phone,
                        urls: list.join(','),
						orderId:this.info.orderId
                    }
					console.log(data)
                    this.$req.post('/xcx/orderComplaint', data).then(res => {
						console.log(res)
                        uni.hideLoading()
                        this.submitflag = false
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        })
                        if (res.data.code == 200) {
                            this.imglist = []
                            this.phone = ''
                            this.content = ''
                            this.complaintType = 0
							this.$tab.navigateBack();
                        }else{
							this.$modal.msg(res.data.msg)
						}
                    })
                }
            },
            sendImg(url, index) {
                return new Promise(resolve => {
                    this.$req.uploadImg(url).then(res => {
                        if (index == this.imglist.length - 1) {
                            resolve(res.data.url)
                        } else {
                            setTimeout(() => {
                                resolve(res.data.url)
                            }, 5000)
                        }
                    })
                })
            },
            addImg() {
                uni.chooseImage({
                    success: (res) => {
                        this.imglist = this.imglist.concat(res.tempFilePaths)
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
	.dissd{
		padding:10rpx ;
		min-width: 150rpx;
		height: 100rpx;
		border-radius: 20rpx;
		border: 2rpx solid #3c81a1;
	}
    .content {
        background: #f7f8fa;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
        width: 100%;
        overflow: hidden;
    }

    .info-box {
        padding: 0 32rpx;
    }

    .info-title {
        padding: 20rpx 0;
        padding-bottom: 10rpx;
        font-size: 32rpx;
        margin-top: 20rpx;
    }

    .q-box {
        background: #fff;
        border-radius: 10rpx;
        margin-top: 10rpx;
        padding: 20rpx 20rpx;
        color: #17698F;
        font-size: 28rpx;
    }

    .type-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 10rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx 20rpx;
        box-sizing: border-box;
    }

    .one-type {
        background: #f8f8f8;
        color: #9d9e9d;
        font-size: 28rpx;
        border: #bfc1c1 solid 1px;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }

    .sel-type {
        border: #17698F solid 1px;
        color: #17698F;
    }

    .input-box {
        font-size: 28rpx;
        width: 100%;
    }

    .content-box {
        background: #fff;
        border-radius: 10rpx;
        margin-top: 10rpx;
        padding: 20rpx 20rpx;
        width: 100%;
    }

    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    .img-box {
        width: 150rpx;
        height: 150rpx;
        border: #B2B2B2 dotted 1px;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
    }

    .one-img {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        position: relative;
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;

        image {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
        }
    }

    .send-btn {
        border-radius: 100rpx;
        margin-top: 40rpx;
    }

    .r-btn {
        color: #17698F;
        font-size: 28rpx;
        width: 100%;
        text-align: center;
        margin: 40rpx 0;
    }
</style>